<template>
  <div class="h100 ecuVersionConfigInfo commonTableSty" ref="groupInfoTableList" style="display: flex;max-height: 400px;overflow:auto">
<!--    <a-steps direction="vertical" size="small" status="finish">-->
<!--      <a-step status="process" :title="'VDebug.000.00'+index" v-for="record,index in ecuConfigData">-->
<!--        <template #description>-->
<!--          <VersionSelect-->
<!--            :initFunction="isIcon"-->
<!--            :disabled="isIcon"-->
<!--            key="2"-->
<!--            :defaultValue="record.versionId"-->
<!--            :clear="true"-->
<!--            :getPopupContainer="(n) => $refs.ecuVersionConfigTable.$el.querySelector('.ant-table-scroll')"-->
<!--            :onlyVersionType="versionType === 'TEST' ? '' : 'PROD'"-->
<!--            :showPackageType="true"-->
<!--            :lazy-load="true"-->
<!--            :default-data="record.versionId ? {'id':record.versionId,'name':record.versionName, 'versionType':record.versionType} : null"-->
<!--            :defaultVersionType="record.versionType"-->
<!--            :packageStrategy="record.packageStrategy"-->
<!--            :ecuModuleId="ecuModuleId"-->
<!--            @changeOption="(id, item) => handleSelectVersion(id, record,item,index)"-->
<!--            @changPackageType="(packageType)=>changePackage(packageType,record)"-->
<!--          />-->
<!--        </template>-->
<!--      </a-step>-->
<!--    </a-steps>-->
    <div>
      <div>
        <div style="float:left; width: 30px;height: 41px;line-height: 44px" v-if="!isIcon">
          <a-tooltip title="新增路线">
            <a-icon type="plus-circle" @click="addEcuConfig" style="font-size: 20px"/>
          </a-tooltip>
        </div>
        <div style="float:left; width: 80px;height: 41px;line-height: 41px;font-size: 14px">路线序号</div>
      </div>
      <div style="width:100%">
        <div style="width: 30px; float:left" v-if="!isIcon">
          <div style="width: 30px;height: 49px;line-height: 56px" v-for="step,i in ecuConfigData">
            <a-tooltip title="删除路线">
              <a-icon type="minus-circle" @click="deleteEcuConfig(i)" style="font-size: 20px"/>
            </a-tooltip>
          </div>
        </div>
        <div style="width: 20px;border: 1px solid rgb(67, 136, 166);margin: 26px 3px 0;border-right: 0;float: left"
             :style="{'height': (49*ecuConfigData.length - 50)+'px'}" v-show="ecuConfigData.length > 1"></div>
        <div class="ant-steps ant-steps-vertical ant-steps-small" style="width: auto; margin-top: 15px;float:left">
          <div class="ant-steps-item ant-steps-item-finish" v-for="step,i in ecuConfigData">
            <div class="ant-steps-item-container">
              <div class="ant-steps-item-tail"></div>
              <div class="ant-steps-item-icon"><span class="ant-steps-icon">{{i+1}}</span>
              </div>
              <div class="ant-steps-item-content">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


    <a-table
      style="width: calc(100% - 120px)"
      ref="ecuVersionConfigTable"
      class="h100 loop-test-step"
      :columns="columns"
      :loading="loadingTbData"
      :dataSource="ecuConfigData"
      :pagination="false"
      :rowKey="(record, index) => {return index}"
    >
      <template slot="addEcuConfigTitle">
        <a-icon type="plus-circle" @click="addEcuConfig"/>
      </template>
      <template slot="addEcuConfigCol" slot-scope="text,record,index">
        <a-icon type="minus-circle" @click="deleteEcuConfig(index)"/>
      </template>
      <template slot="smartDrivingDomainVersion" slot-scope="text,record,index">
        <span>{{taskId?text:fliterNum(index,record)}}</span>
      </template>
      <!-- <template slot="resourceVersion" slot-scope="text,record">
        <VersionSelect
          key="1"
          v-model="record.resourceVersionId"
          :clear="true"
          :disabled="true"
          :getPopupContainer="(n) => $refs.ecuVersionConfigTable.$el.querySelector('.ant-table-scroll')"
          :onlyVersionType="versionType === 'TEST' ? '' : 'PROD'"
          :lazy-load="true"
          :default-data="record.versionId ? {'id':record.versionId,'name':record.versionName, 'versionType':record.versionType} : null"
          :defaultVersionType="record.versionType"
          :ecuModuleId="ecuModuleId"
        />
      </template> -->
      <template slot="targetVersion" slot-scope="text,record,index">
        <VersionSelect
          :initFunction="isIcon"
          :disabled="isIcon"
          key="2"
          :defaultValue="record.versionId"
          :clear="true"
          :getPopupContainer="(n) => $refs.groupInfoTableList"
          :onlyVersionType="versionType === 'TEST' ? '' : 'PROD'"
          :showPackageType="true"
          :lazy-load="true"
          :default-data="record.versionId ? {'id':record.versionId,'name':record.versionName, 'versionType':record.versionType} : null"
          :defaultVersionType="record.versionType"
          :packageStrategy="record.packageStrategy"
          :ecuModuleId="ecuModuleId"
          place-holder="目标版本"
          @changeOption="(id, item) => handleSelectVersion(id, record,item,index)"
          @changPackageType="(packageType)=>changePackage(packageType,record)"
        />
      </template>
    </a-table>
  </div>
</template>
<script>
import { LoopTestTaskEcuVersionConfigColumns } from '@/views/task/test/list'
import tableEllipsis from '@/components/Ellipsis/TableEllipsis'
import CommonSelect from '@/components/SelfComponents/CommonSelect.vue'
import QuestionMarkTip from '@/views/components/QuestionMarkTip'
import versionApi from '@/api/modules/software/partsVersion'
import { STable } from '@/components'
import VersionSelect from '@/views/components/VersionSelect'
import lodash from 'lodash'

const configInfo = {
  smartDrivingDomainVersion: undefined,
  softwareCode: undefined,
  recourceVersion: undefined,
  packageStrategy: "PATCH_PACKAGE",
  versionId: undefined,
  groupNo: 0,
  groupRollback: true,
  groupUpgradeNo: 1,
  name:'',
  ecuModuleId:'',
  ecuId:'',
  // 源版本
  resourceVersionId:''
}

export default {
  components: {
    tableEllipsis,
    CommonSelect,
    STable,
    VersionSelect,
    QuestionMarkTip
  },
  props: {
    clearList:{
      type: String,
      default: ''
    },
    selectedEcuItem:{
      type: Object,
      default () {
        return null
      }
    },
    ecuModuleId:{
      type: String,
      default: ''
    },
    isIcon:{
      type: Boolean,
      default: false
    },
    taskId:{
      type: String,
      default: ''
    }
  },
  computed: {
  },
  data () {
    return {
      columns: [...LoopTestTaskEcuVersionConfigColumns],
      ecuConfigData:[],
      loadingTbData:false,
      versionType:'TEST',
      smartDrivingDomainVersion:''
    }
  },
  watch: {
    selectedEcuItem:{
      handler(val){
        if(val){
          this.ecuConfigData.forEach(item=>{
            item.ecuId=this.selectedEcuItem.id
            item.name=this.selectedEcuItem.name
            item.ecuModuleId=this.selectedEcuItem.ecuModuleId
            item.softwareCode=this.selectedEcuItem.softwareCode
          })
        }
      },
      immediate:true,
      deep:true
    },
    clearList(bool){
      this.ecuConfigData=[]
    },
    taskId: {
      handler (val) {
        if (this.isIcon) {
          this.getLoopTestTaskDetails()
        }
      },
      immediate: true
    }
  },
  created () {
  },
  mounted () {
    this.getversionName()
  },
  methods: {
    // 获取循环测试任务详细信息
    getLoopTestTaskDetails () {
      this.loadingTbData = true
      this.$api.getLoopTestTaskDetails(this.taskId)
        .then((res) => {
          const data = res.data
          this.ecuModuleId = data.ecuId
          res.data.steps.forEach(item => {
            this.ecuConfigData.push({
              smartDrivingDomainVersion: item.vehicleVersion,
              ecuVersionId: item.ecuVersionId,
              ecuModuleId: data.ecuId,
              name: data.ecuName,
              softwareCode: data.softwareCode,
              versionId: item.ecuVersionId,
              packageStrategy: item.packageStrategy
            })
          })
          this.loadingTbData = false
        })
        .finally(() => {
          this.loadingTbData = false
        })
    },
    getECUConfigData(){
      for(let i=0;i<this.ecuConfigData.length;i++){
        if(!this.ecuConfigData[i].versionId){
          this.$message.error('请选择ECU版本配置列表中的目标版本')
          return 
        }
      }
      return this.ecuConfigData
    },
    fliterNum(index,record){
      if(index==0){
        record.smartDrivingDomainVersion = this.smartDrivingDomainVersion
        return this.smartDrivingDomainVersion
      }else if(index>0){
        const preSmartVersionArr=this.ecuConfigData[0].smartDrivingDomainVersion.split('.')
        if((parseInt(preSmartVersionArr[2])+index) <= 999){
          preSmartVersionArr[2] = this.filterArr(parseInt(preSmartVersionArr[2])+index,3)
          record.smartDrivingDomainVersion = preSmartVersionArr.join('.')
          return preSmartVersionArr.join('.')
        }else if((parseInt(preSmartVersionArr[2])+index) == 1000){
          return this.filterArr(parseInt(preSmartVersionArr[2])+index,3,preSmartVersionArr)
        }else if((parseInt(preSmartVersionArr[2])+index) > 1000){
          preSmartVersionArr[2] = this.filterArr(parseInt(preSmartVersionArr[2])+index,3)
          preSmartVersionArr[1] = this.filterArr(parseInt(preSmartVersionArr[1])+1,3)
          return preSmartVersionArr.join('.')
        }
      }
    },
    changePackage(packageType,record){
      record.packageStrategy = packageType
    },
    // 选择版本、设置ECU版本信息到ECU行上
    handleSelectVersion (id, ecu, curVersionInfo = {},index) {
      ecu.versionId = id
      if(index>0){
        this.ecuConfigData[index-1].resourceVersionId = id
      }
    },
    // 获取智驾ecu
    getversionName(){
      this.$api.getNextVehicleVersion().then(res=>{
        this.smartDrivingDomainVersion = res.data
      })
    },
    // 智驾域版本号已存在更新数据
    updateVersionName(newVersion){
      this.$nextTick(()=>{
        this.smartDrivingDomainVersion=newVersion
        this.$set(this.ecuConfigData[0],'smartDrivingDomainVersion',newVersion)
      })
    },
    filterArr(number, length, total) {
      if(number == 1000){
        total[1] = this.filterArr(parseInt(total[1])+1,3)
        total[2] = this.filterArr(0,3)
        return total.join('.')
      }
      return (Array(length).join('0') + number).slice(-length);
    },
    // 新增ecu
    addEcuConfig(){
      // if(this.ecuConfigData.length>0 && !this.ecuConfigData[this.ecuConfigData.length-1].versionId){
      //   this.$message.error(this.$t('pleaseSelect') + 'ECU目标版本')
      //   return
      // }
      configInfo.ecuId=this.selectedEcuItem.id
      configInfo.name=this.selectedEcuItem.name
      configInfo.ecuModuleId=this.selectedEcuItem.ecuModuleId
      configInfo.softwareCode=this.selectedEcuItem.softwareCode
      this.ecuConfigData.push(lodash.cloneDeep(configInfo))
    },
    deleteEcuConfig(index){
      this.ecuConfigData.splice(index, 1)
    },
    getPopupContainerColumn () {
      return document.body
    }
  }
}
</script>
<style lang="less" scoped>
  /deep/ .loop-test-step td.ant-table-row-cell-break-word{
    white-space: nowrap;
  }
  /deep/.ant-steps-vertical > .ant-steps-item > .ant-steps-item-container > .ant-steps-item-tail::after{
    height: 13px;
  }
  /deep/ .ant-steps-vertical .ant-steps-item-content{
    min-height: 49px;
  }

</style>
